{% extends 'main/base.html' %}
{% block content %}
    <div id='block'>
        <script type='text/javascript'
                src='https://paymaster.ru/widget/Basic/1?LMI_MERCHANT_ID=f2474425-f4ce-4721-8827-f75cdf1b8271&LMI_PAYMENT_AMOUNT=100&LMI_PAYMENT_DESC=Оплата+интернет&LMI_CURRENCY=RUB'></script>
        <script type='text/javascript'>
            $(document).ready(function () {
                setTimeout('addField()', 100);
            });
            function addField() {
                var container = $('div.pmwidgetDone');
                if (container.length > 0) {
                    $("#client_id").change(function () {
                        var val = $(this).val();
                        if (val) {
                            $("#agreement-info").show();
                            var selected = $(this).find(":selected");
                            $(".balance").text(selected.data('balance'));
                            $(".monthly").text(selected.data('monthly'));
                        }
                        else
                            $("#agreement-info").hide();
                    });
                    $('.pmpaymenttype', container).before($("#agreements-table").show());
                    $("#pmwidgetForm").submit(function (event) {
                        var desc = $("input[name=LMI_PAYMENT_DESC]");
                        var id = $("#client_id").val();
                        if (id == '') {
                            event.preventDefault();
                            alert('Пожалуйста, заполните все поля.');
                            return false;
                        }
                        desc.val("Оплата из личного кабинета: {{ request.user.gtlinkuser.client.name }} , №" + id);
                    });
                }
                else  setTimeout('addField()', 100);
            }
        </script>
    </div>
    <table id="agreements-table" style="display:none">
        <tr>
            <td valign="top">
                <p><strong>№ договора:&nbsp;</strong><select id="client_id">
                    <option value="">--</option>
                    {% for agreement in agreements %}
                        <option value="{{ agreement.number }}" data-balance="{{ agreement.balance }}"
                                data-monthly="{{ agreement.monthly }}">
                            {{ agreement.number }}
                        </option>
                    {% endfor %}
                </select></p>
            </td>
            <td>
                <div id="agreement-info">
                    <p><strong>Баланс:&nbsp;</strong><span class="balance"/> р.</p>

                    <p><strong>Ежемесечная стоимость:&nbsp;</strong><span class="monthly"/> р.</p>
                </div>
            </td>
        </tr>
    </table>
{% endblock %}